<template>
  <div id="dataAnalysis">
    <div class="chart-boxs">
      <span class="chart-box-title">舆情走势</span>
      <el-button class="showChartBtn">隐藏</el-button>
      <!-- <el-button>展开</el-button> -->
      <!-- <span class="lineOptionText">来源区域：</span>
      <el-select
        class="lineOption"
        v-model="lineOptionModel"
        placeholder="请选择"
      >
        <el-option
          v-for="item in lineAxiosOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <div
        id="line-chart"
        class="chart-box"
      ></div>
    </div>
    <div class="chart-boxs">
      <span class="chart-box-title">媒体分布</span>
      <el-button class="showChartBtn">隐藏</el-button>
      <div
        id="pie-chart1"
        class="chart-box"
        style="width: 50%"
      ></div>
      <div
        id="bar-chart"
        class="chart-box"
        style="width: 50%"
      ></div>
    </div>
    <div class="chart-boxs">
      <span class="chart-box-title">情绪分析</span>
      <el-button class="showChartBtn">隐藏</el-button>
      <div
        id="pie-chart2"
        class="chart-box"
        style="width: 50%"
      ></div>
      <div
        id="river-chart"
        class="chart-box"
        style="width: 50%"
      ></div>
    </div>
    <div
      class="chart-boxs"
      style="height:600px;"
    >
      <span class="chart-box-title">地域分布</span>
      <div class="mapLink">
          <i></i>
          <span style="cursor: pointer;" @click="drawMap">中国地图</span>
          <span v-show="province !== ''">&nbsp;>&nbsp;</span>
          <span>{{province}}</span>
      </div>
      <div
        id="map-chart"
        class="chart-box"
        style="height: 550px;"
      ></div>
      <div class="visualMap"><span class="visualMap_top">高</span><span class="visualMap_bottom">低</span></div>
      <div
        id="area-chart"
        class="chart-box"
        style="height: 500px;"
      >
        <ul class="area-ul">
          <li
            class="area-li"
            v-for="item in areaList"
            :key="item.areacode"
            
          >
            <span class="area-name">{{item.name}}</span>
            <span class="area-progress">
                <span
                class="area-rate"
                @dblclick="areadbFuc(item)"
                :style="{'width':item.rate}"
              ></span></span>
            <span class="area-data">{{item.value}}条</span>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog
      :title="editData.title+'数据修改'"
      :visible.sync="editData.dialogVisible"
      :close-on-click-modal="false"
    >
      <el-form v-if="editData.type !== 'river'" :model="editData">
        <el-form-item
          label="节点名称"
          :label-width="editData.formLabelWidth"
        >
          <el-input style="width: 200px"
            v-model="editData.name"
            :disabled="true"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="节点数据"
          :label-width="editData.formLabelWidth"
        >
          <el-input style="width: 200px"
            v-model="editData.data"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-radio-group v-if="editData.type == 'river'" v-model="editData.river.stand" size="small">
        <el-radio-button label="positive">正面</el-radio-button>
        <el-radio-button label="neutral">中立</el-radio-button>
        <el-radio-button label="negative">负面</el-radio-button>
      </el-radio-group>
      <div v-if="editData.type == 'river'" style="margin: 20px;"></div>
      <el-form v-if="editData.type == 'river'" label-position="right" label-width="80px" :model="editData.formLabelAlign">
        <el-form-item v-show="editData.river.stand == 'positive'" label="节点名称" :label-width="editData.formLabelWidth">
            <el-input v-model="editData.river.time" style="width: 200px" :disabled="true"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-show="editData.river.stand == 'positive'" label="节点数据" :label-width="editData.formLabelWidth">
            <el-input v-model="editData.river.positive" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item v-show="editData.river.stand == 'neutral'" label="节点名称" :label-width="editData.formLabelWidth">
            <el-input v-model="editData.river.time" style="width: 200px" :disabled="true"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-show="editData.river.stand == 'neutral'" label="节点数据" :label-width="editData.formLabelWidth">
            <el-input v-model="editData.river.neutral" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item v-show="editData.river.stand == 'negative'" label="节点名称" :label-width="editData.formLabelWidth">
            <el-input v-model="editData.river.time" style="width: 200px" :disabled="true"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-show="editData.river.stand == 'negative'" label="节点数据" :label-width="editData.formLabelWidth">
            <el-input v-model="editData.river.negative" style="width: 200px"></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editData.dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editDataFuc"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import "../../../node_modules/echarts/map/js/china.js";
import "../../../node_modules/echarts/map/js/province/anhui.js";
import "../../../node_modules/echarts/map/js/province/aomen.js";
import "../../../node_modules/echarts/map/js/province/beijing.js";
import "../../../node_modules/echarts/map/js/province/chongqing.js";
import "../../../node_modules/echarts/map/js/province/fujian.js";
import "../../../node_modules/echarts/map/js/province/gansu.js";
import "../../../node_modules/echarts/map/js/province/guangdong.js";
import "../../../node_modules/echarts/map/js/province/guangxi.js";
import "../../../node_modules/echarts/map/js/province/guizhou.js";
import "../../../node_modules/echarts/map/js/province/hainan.js";
import "../../../node_modules/echarts/map/js/province/hebei.js";
import "../../../node_modules/echarts/map/js/province/heilongjiang.js";
import "../../../node_modules/echarts/map/js/province/henan.js";
import "../../../node_modules/echarts/map/js/province/hubei.js";
import "../../../node_modules/echarts/map/js/province/hunan.js";
import "../../../node_modules/echarts/map/js/province/jiangsu.js";
import "../../../node_modules/echarts/map/js/province/jiangxi.js";
import "../../../node_modules/echarts/map/js/province/jilin.js";
import "../../../node_modules/echarts/map/js/province/liaoning.js";
import "../../../node_modules/echarts/map/js/province/neimenggu.js";
import "../../../node_modules/echarts/map/js/province/ningxia.js";
import "../../../node_modules/echarts/map/js/province/qinghai.js";
import "../../../node_modules/echarts/map/js/province/shandong.js";
import "../../../node_modules/echarts/map/js/province/shanghai.js";
import "../../../node_modules/echarts/map/js/province/shanxi.js";
import "../../../node_modules/echarts/map/js/province/shanxi1.js";
import "../../../node_modules/echarts/map/js/province/sichuan.js";
import "../../../node_modules/echarts/map/js/province/taiwan.js";
import "../../../node_modules/echarts/map/js/province/tianjin.js";
import "../../../node_modules/echarts/map/js/province/xianggang.js";
import "../../../node_modules/echarts/map/js/province/xinjiang.js";
import "../../../node_modules/echarts/map/js/province/xizang.js";
import "../../../node_modules/echarts/map/js/province/yunnan.js";
import "../../../node_modules/echarts/map/js/province/zhejiang.js";
export default {
  props: ["activeName"],
  data() {
    return {
      lineOptionModel: "0",
      lineAxiosOption: [
        { value: "0", label: "按小时排列" },
        { value: "1", label: "按天排列" }
      ],
      areaList: [
        {
          name: "北京",
          areacode: "110000",
          value: 2540,
          children: Array(0),
          rate: "10%"
        },
        {
          name: "广东",
          areacode: "440000",
          value: 1729,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "上海",
          areacode: "310200",
          value: 1340,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "湖北",
          areacode: "420000",
          value: 680,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "福建",
          areacode: "350000",
          value: 590,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "浙江",
          areacode: "330000",
          value: 370,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "山东",
          areacode: "370000",
          value: 280,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "安徽",
          areacode: "340000",
          value: 25,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "贵州",
          areacode: "520000",
          value: 22,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "江西",
          areacode: "360000",
          value: 21,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "重庆",
          areacode: "500000",
          value: 20,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "内蒙古",
          areacode: "150000",
          value: 19,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "江苏",
          areacode: "320000",
          value: 18,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "吉林",
          areacode: "220000",
          value: 18,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "新疆",
          areacode: "650000",
          value: 16,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "湖南",
          areacode: "430000",
          value: 15,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "天津",
          areacode: "120000",
          value: 14,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "陕西",
          areacode: "610000",
          value: 13,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "河南",
          areacode: "410000",
          value: 13,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "山西",
          areacode: "140000",
          value: 10,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "河北",
          areacode: "130000",
          value: 9,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "辽宁",
          areacode: "210000",
          value: 8,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "广西",
          areacode: "450000",
          value: 8,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "云南",
          areacode: "530000",
          value: 7,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "黑龙江",
          areacode: "230000",
          value: 7,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "甘肃",
          areacode: "620000",
          value: 6,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "四川",
          areacode: "510000",
          value: 5,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "青海",
          areacode: "630000",
          value: 4,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "海南",
          areacode: "460000",
          value: 1,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "宁夏",
          areacode: "640000",
          value: 1,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "澳门",
          areacode: "820000",
          value: 0,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "香港",
          areacode: "810000",
          value: 0,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "南海诸岛",
          areacode: "900000",
          value: 0,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "台湾",
          areacode: "710000",
          value: 0,
          children: Array(0),
          rate: "0%"
        },
        {
          name: "西藏",
          areacode: "540000",
          value: 0,
          children: Array(0),
          rate: "0%"
        }
      ],
      province: '',
      editData: {
        formLabelWidth: "120px",
        dialogVisible: false,
        title: "",
        name: "",
        data: '',
        seriesIndex: 0,
        dataIndex: 0,
        type: '',
        river: {
          stand: 'positive',
          time: '',
          positive: '',
          positiveDataIndex: 0,
          neutral: '',
          neutralDataIndex: 0,
          negative: '',
          negativeDataIndex: 0
        }
      },
      lineChartOption: {
        tooltip: {
          backgroundColor: "rgba(255,255,255,.8)",
          borderColor: "#2f74ff",
          borderWidth: 1,
          borderRadius: 0,
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: "1",
            lineStyle: {
              width: 1
            }
          },
          textStyle: {
            color: "#333333"
          },

          formatter: function(datas) {
            var res = datas[0].name + "<br/>",
              val;
            for (var i = 0, length = datas.length; i < length; i++) {
              val = datas[i].value;
              res += datas[i].seriesName + "：" + val + "<br/>";
            }
            return res;
          }
        },
        legend: {
          itemWidth: 8,
          itemGap: 30,
          top: 0,
          left: 200,
          textStyle: {
            color: "#adbcd8"
          },
          data: [
            { name: "全部", icon: "circle" },
            { name: "正面", icon: "circle" },
            { name: "负面", icon: "circle" },
            { name: "中立", icon: "circle" }
          ],
          selectedMode: true,
          borderWidth: 0
        },
        grid: {
          left: "4%",
          right: "50",
          bottom: "0",
          show: false,
          containLabel: true
        },
        xAxis: {
          name: "日期",
          nameTextStyle: {
            color: "#a4b2cc",
            align: "left"
          },
          type: "category",
          boundaryGap: false,
          data: ["10/11", "10/12", "10/13", "10/14", "10/15", "10/16"],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ebf2fc"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#a7b2c8",
              align: "center",
              fontSize: 12
            },
            formatter: function(value) {
              // 格式化成月/日，只在第一个刻度显示年份
              let valueArr = value.split(" ");
              return valueArr.join("\n");
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#ebf2fc"],
              type: "solid"
            }
          },
          axisLabel: {
            show: true,
            showMaxLabel: false,
            color: "#06D3CD",
            // fontFamily: 'PingFangSC',
            // fontSize: 14,
            // fontWeight: 300,
            textStyle: {
              color: "#a4b2cc"
            }
          }
        },
        calculable: true,
        series: [
          {
            name: "全部",
            type: "line",
            smooth: true,
            data: [],
            hoverAnimation: false,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              color: "#9eadc5",
              shadowColor: "rgba(158,173,197,0.7)",
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              shadowBlur: 10
            },
            itemStyle: {
              normal: {
                color: "#9eadc5"
              }
            },
            showSymbol: false
          },
          {
            name: "正面",
            type: "line",
            smooth: true,
            data: [],
            hoverAnimation: false,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              color: "#fd5f60",
              shadowColor: "rgba(253,95,96,0.7)",
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              shadowBlur: 10
            },
            itemStyle: {
              normal: {
                color: "#fd5f60"
              }
            },
            showSymbol: false
          },
          {
            name: "中立",
            type: "line",
            smooth: true,
            data: [],
            hoverAnimation: false,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              color: "#43a6fb",
              shadowColor: "rgba(67,166,251,0.7)",
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              shadowBlur: 10
            },
            itemStyle: {
              normal: {
                color: "#43a6fb"
              }
            },

            showSymbol: false
          },{
            name: "负面",
            type: "line",
            smooth: true,
            data: [],
            hoverAnimation: false,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              color: "#33cf92",
              shadowColor: "rgba(51,207,146,0.7)",
              shadowOffsetX: 0,
              shadowOffsetY: 5,
              shadowBlur: 10
            },
            itemStyle: {
              normal: {
                color: "#33cf92"
              }
            },
            showSymbol: false
          }
        ]
      },
      pieOption1: {
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['40%', '50%'],
                data: []
            }
        ]
      },
      pieOption2: {
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['40%', '50%'],
                data: []
            }
        ]
      },
      barOption: {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter:function(params){
                var rtn = '';
                rtn += '<span>' + params[1].name + '：'+ params[1].data + '</span>';
                return  rtn
            }
        },
        grid: {
            top: '3%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLine:{
                show: false
            },
            axisTick:{
                show: false
            },
            splitLine:{
                show: false
            }
        },
        yAxis: {
            type: 'category', 
            axisLine:{
                show: false
            },
            axisTick:{
                show: false
            },
            data: ['微信', '微博', '新闻', '论坛', '电子报', '视频', '博客']
        },
        series: [
            { // For shadow
                type: 'bar',
                name: 'shadow',
                itemStyle: {
                    color: '#e9f2ff',
                    emphasis:{
                        color: '#e9f2ff'
                    }
                },
                barWidth : 10,
                barGap: '-100%',
                data: [],
                animation: false
            },
            {
                type: 'bar',
                barWidth : 10,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [
                            {offset: 0, color: '#38a4f7'},
                            {offset: 1, color: '#5bd8a9'}
                        ],
                        globalCoord: true
                        },
                        barBorderRadius: [0, 10, 10, 0]
                    },
                    
                },
                data: []
            }
        ]
      },
      mapOption: {
        tooltip: {
          formatter: function(params) {
            if (isNaN(params.value)) {
              params.value = "--";
            }
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            );
          }
        },
        visualMap: {
          min: 0,
          max: 5000,
          itemHeight: 90,
          left: -500,
          top: "bottom",
          text: ["高", "低"],
          inRange: {
            color: ["#35d8a9", "#4dc1fe", "#4c9cfb"]
          }
        },
        series: [
          {
            name: "信息量",
            type: "map",
            map: "china",
            geoIndex: 0,
            roam: false,
            zoom: 1.1,
            label: {
                show: false,
                fontSize: "10"
            },
            itemStyle: {
                normal: {
                borderWidth: 1,
                borderColor: "#fff",
                color: "#e3f0f8" // 背景颜色
                },
                emphasis: {
                areaColor: "#F3B329" // 鼠标选中高亮颜色
                }
            },
            data: []
          }
        ]
      },
      timeStamp: '',
      maptimeStamp: 0
    };
  },
  mounted() {
  },
  methods: {
    areadbFuc(params){
        console.log(params)
        this.editData.dialogVisible = true;
        this.editData.name = params.name;
        this.editData.data = params.value;
        this.editData.dataIndex = params.areacode;
        this.editData.type = 'area';
        this.editData.title = '地域分布';
    },
    dlClick(){
        var that = this;
        this.lineChart.on("dblclick", function(params) {
            that.editData.dialogVisible = true;
            that.editData.name = params.name;
            that.editData.data = params.value;
            that.editData.seriesIndex = params.seriesIndex;
            that.editData.dataIndex = params.dataIndex;
            that.editData.type = 'lineChart';
            that.editData.title = '舆情走势';

        });
        this.pieChart1.on("dblclick", function(params) {
            console.log(params);
            that.editData.dialogVisible = true;
            that.editData.name = params.name;
            that.editData.data = params.value;
            that.editData.seriesIndex = params.seriesIndex;
            that.editData.dataIndex = params.dataIndex;
            that.editData.type = 'pieChart1';
            that.editData.title = '媒体分布';

        });
        this.pieChart2.on("dblclick", function(params) {
            console.log(params);
            that.editData.dialogVisible = true;
            that.editData.name = params.name;
            that.editData.data = params.value;
            that.editData.seriesIndex = params.seriesIndex;
            that.editData.dataIndex = params.dataIndex;
            that.editData.type = 'pieChart2';
            that.editData.title = '情绪分析';

        });
        this.barChart.on("dblclick", function(params) {
            console.log(params);
            if(params.seriesIndex == 1){
                that.editData.dialogVisible = true;
                that.editData.name = params.name;
                that.editData.data = params.value;
                that.editData.seriesIndex = params.seriesIndex;
                that.editData.dataIndex = params.dataIndex;
                that.editData.type = 'barChart';
                that.editData.title = '媒体分布';
            }
            
        });
        this.mapChart.on("click", function(chinaParam) {
            if(that.maptimeStamp == 0){
                that.maptimeStamp = event.timeStamp;
                setTimeout(() =>{
                    if(that.maptimeStamp !== 0){
                        console.log(that.maptimeStamp);
                        that.maptimeStamp = 0;
                        that.mapChartEditFuc(chinaParam);
                    }
                },250);
            }else{
                if((event.timeStamp - that.maptimeStamp) < 250){ // 双击事件
                    console.log(event.timeStamp - that.maptimeStamp);
                    that.maptimeStamp = 0;
                    that.editData.dialogVisible = true;
                    that.editData.name = chinaParam.name;
                    that.editData.data = chinaParam.value;
                    that.editData.seriesIndex = chinaParam.seriesIndex;
                    that.editData.dataIndex = chinaParam.dataIndex;
                    that.editData.type = 'mapChart';
                    that.editData.title = '地域分布';
                }
            }
            
        });
    },
    mapChartEditFuc(chinaParam){
        let mapOption = this.mapChart.getOption();
        mapOption.series[0].map = chinaParam.name;
        mapOption.series[0].mapType = chinaParam.name;
        mapOption.series[0].data = chinaParam.data.children;
        mapOption.series[0].label.show = true;
        this.mapChart.clear();
        this.province = chinaParam.name;
        console.log(chinaParam.name);
        this.mapChart.setOption(mapOption, true);
    },
    editDataFuc(){
        this.editData.dialogVisible = false;
        if(this.editData.type == 'lineChart'){
            this.lineChart.clear();
            this.lineChartOption.series[this.editData.seriesIndex].data[this.editData.dataIndex] = this.editData.data;
            this.lineChart.setOption(this.lineChartOption);
        }else if(this.editData.type == 'pieChart1'){
            this.pieChart1.clear();
            this.pieOption1.series[this.editData.seriesIndex].data[this.editData.dataIndex].value = this.editData.data;
            this.pieChart1.setOption(this.pieOption1);
        }else if(this.editData.type == 'pieChart2'){
            this.pieChart2.clear();
            this.pieOption2.series[this.editData.seriesIndex].data[this.editData.dataIndex].value = this.editData.data;
            this.pieChart2.setOption(this.pieOption2);
        }else if(this.editData.type == 'barChart'){
            this.barOption.series[this.editData.seriesIndex].data[this.editData.dataIndex] = this.editData.data;
            var dataArr = this.barOption.series[this.editData.seriesIndex].data;
            let yMax = 0;
            for (let index = 0; index < dataArr.length; index++) {
                if(yMax < dataArr[index]){
                    yMax = dataArr[index];
                } 
            }
            var dataShadow = [];
            for (var i = 0; i < dataArr.length; i++) {
                    dataShadow.push(yMax);
            }
            this.barOption.series[0].data = dataShadow;
            this.barChart.clear();
            this.barChart.setOption(this.barOption);
        }else if(this.editData.type == 'area'){
            for (let k = 0; k < this.areaList.length; k++) {
                if(this.editData.dataIndex == this.areaList[k].areacode){
                    this.areaList[k].value = this.editData.data;
                }
            }
        }else if(this.editData.type == 'river'){
            var riverOption = this.riverChart.getOption();
            riverOption.series[0].data[this.editData.river.positiveDataIndex][1] = this.editData.river.positive;
            riverOption.series[0].data[this.editData.river.neutralDataIndex][1] = this.editData.river.neutral;
            riverOption.series[0].data[this.editData.river.negativeDataIndex][1] = this.editData.river.negative; 
            this.riverChart.setOption(riverOption);
        }else if(this.editData.type == 'mapChart'){
            var mapOption = this.mapChart.getOption();
            mapOption.series[this.editData.seriesIndex].data[this.editData.dataIndex].value = this.editData.data;
            this.mapChart.setOption(mapOption);
        }
    },
    omm(params){
        console.log(params)
        this.editData.dialogVisible = true;
        this.editData.type = 'river';
        this.editData.title = '情绪分析';
        for (let i = 0; i < params.length; i++) {
            this.editData.river.time = params[i].data[0];
            if(params[i].data[2] == '正面'){
                this.editData.river.positive = params[i].data[1];
                this.editData.river.positiveDataIndex = params[i].dataIndex;
            }
            if(params[i].data[2] == '中立'){
                this.editData.river.neutral = params[i].data[1];
                this.editData.river.neutralDataIndex = params[i].dataIndex;
            }
            if(params[i].data[2] == '负面'){
                this.editData.river.negative = params[i].data[1];
                this.editData.river.negativeDataIndex = params[i].dataIndex;
            }
        }
    },
    drawRiver() {
        var datas = [
            ["2020-06-21 00:00", 3423, "正面"],
            ["2020-06-21 00:00", 189, "中立"],
            ["2020-06-21 00:00", 1616, "负面"],
            ["2020-06-21 01:00", 1307, "正面"],
            ["2020-06-21 01:00", 174, "中立"],
            ["2020-06-21 01:00", 834, "负面"],
            ["2020-06-21 02:00", 1140, "正面"],
            ["2020-06-21 02:00", 153, "中立"],
            ["2020-06-21 02:00", 526, "负面"],
            ["2020-06-21 03:00", 900, "正面"],
            ["2020-06-21 03:00", 235, "中立"],
            ["2020-06-21 03:00", 461, "负面"],
            ["2020-06-21 04:00", 938, "正面"],
            ["2020-06-21 04:00", 264, "中立"],
            ["2020-06-21 04:00", 582, "负面"],
            ["2020-06-21 05:00", 1166, "正面"],
            ["2020-06-21 05:00", 262, "中立"],
            ["2020-06-21 05:00", 597, "负面"],
            ["2020-06-21 06:00", 1571, "正面"],
            ["2020-06-21 06:00", 121, "中立"],
            ["2020-06-21 06:00", 1064, "负面"],
            ["2020-06-21 07:00", 2434, "正面"],
            ["2020-06-21 07:00", 133, "中立"],
            ["2020-06-21 07:00", 1503, "负面"],
            ["2020-06-21 08:00", 3053, "正面"],
            ["2020-06-21 08:00", 224, "中立"],
            ["2020-06-21 08:00", 1595, "负面"],
            ["2020-06-21 09:00", 3819, "正面"],
            ["2020-06-21 09:00", 268, "中立"],
            ["2020-06-21 09:00", 1954, "负面"],
            ["2020-06-21 10:00", 3837, "正面"],
            ["2020-06-21 10:00", 240, "中立"],
            ["2020-06-21 10:00", 1756, "负面"],
            ["2020-06-21 11:00", 3781, "正面"],
            ["2020-06-21 11:00", 241, "中立"],
            ["2020-06-21 11:00", 1474, "负面"],
            ["2020-06-21 12:00", 2604, "正面"],
            ["2020-06-21 12:00", 176, "中立"],
            ["2020-06-21 12:00", 1074, "负面"],
            ["2020-06-21 13:00", 1655, "正面"],
            ["2020-06-21 13:00", 149, "中立"],
            ["2020-06-21 13:00", 1027, "负面"],
            ["2020-06-21 14:00", 1981, "正面"],
            ["2020-06-21 14:00", 130, "中立"],
            ["2020-06-21 14:00", 917, "负面"],
            ["2020-06-21 15:00", 2611, "正面"],
            ["2020-06-21 15:00", 104, "中立"],
            ["2020-06-21 15:00", 1282, "负面"],
            ["2020-06-21 16:00", 2073, "正面"],
            ["2020-06-21 16:00", 205, "中立"],
            ["2020-06-21 16:00", 1416, "负面"],
            ["2020-06-21 17:00", 1890, "正面"],
            ["2020-06-21 17:00", 196, "中立"],
            ["2020-06-21 17:00", 1273, "负面"],
            ["2020-06-21 18:00", 1795, "正面"],
            ["2020-06-21 18:00", 137, "中立"],
            ["2020-06-21 18:00", 1494, "负面"],
            ["2020-06-21 19:00", 1649, "正面"],
            ["2020-06-21 19:00", 149, "中立"],
            ["2020-06-21 19:00", 1527, "负面"],
            ["2020-06-21 20:00", 1463, "正面"],
            ["2020-06-21 20:00", 145, "中立"],
            ["2020-06-21 20:00", 1672, "负面"],
            ["2020-06-21 21:00", 112, "正面"],
            ["2020-06-21 21:00", 6, "中立"],
            ["2020-06-21 21:00", 154, "负面"]
        ];
        var that = this;
        var riverOption= {
            tooltip: {
                trigger: 'axis',
                formatter: function (parmas) {
                    var ret = '';
                    for (var i in parmas) {
                        ret = ret + parmas[i].data[2] + ':' + parmas[i].data[1] + "<br/>"
                    }
                    if(event.type == 'click'){
                        console.log(event.timeStamp)
                        if(that.timeStamp == ''){
                            that.timeStamp = event.timeStamp
                        }else{
                            if((event.timeStamp - that.timeStamp) < 250){
                                that.omm(parmas)
                                that.timeStamp = event.timeStamp
                            }else{
                                that.timeStamp = event.timeStamp
                            }
                        }
                        
                    }
                    
                    return ret;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true,
                x: 1
            },
            legend: {
                itemWidth: 8,
                itemGap: 30,
                textStyle: {
                    color: "#adbcd8"
                },
                bottom: '2%',
                data: [
                    { name: "正面", icon: "circle" },
                    { name: "负面", icon: "circle" },
                    { name: "中立", icon: "circle" }
                ],
                selectedMode: true,
                borderWidth: 0
                },
            singleAxis: {
                top: 50,
                bottom: 100,
                axisTick: {},
                axisLabel: {},
                type: 'time',
                axisPointer: {
                    animation: true,
                    label: {
                        show: true
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        opacity: 0.2,
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'dashed',
                        width: 1,
                        color: "#A3A3A3",
                    }
                },
                splitNumber: 7,
            },
            series: [
                {
                    type: 'themeRiver',
                    label: {
                        normal: {
                            show: false,
                            padding: [0, 0, 0, -20],
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            // shadowBlur: 10,
                            // shadowColor: 'rgba(0, 0, 0, 0.8)'
                        }
                    },
                    data: []
                }
            ],
            color: ['#f881a9', '#ad8cf7', '#3bb1f0']
        }
        riverOption.series[0].data = datas;
        this.riverChart.setOption(riverOption);
    },
    drawLine() {
      var dataArr = {
          'all': [90, 60, 55, 45, 50, 40], // 全部
          'positive': [40, 30, 20, 20, 32, 23], // 正面
          'neutral': [43, 36, 23, 23, 24, 31], // 中立
          'negative':[17, 24, 12, 12, 23, 26] // 消极
      }
      this.lineChartOption.series[0].data = dataArr.all;
      this.lineChartOption.series[1].data = dataArr.positive;
      this.lineChartOption.series[2].data = dataArr.neutral;
      this.lineChartOption.series[3].data = dataArr.negative;
      this.lineChart.setOption(this.lineChartOption);
    },
    drawPie1() {
      this.pieOption1.series[0].data =  [
        {
        value: 335,
        name: '微信',
        itemStyle:{
            normal:{
                shadowColor: 'rgba(250,125,172,0.5)',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 5,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                    {offset: 0, color: '#fa7dac'},
                    {offset: 1, color: '#ffb561'}
                ],
                globalCoord: false
                },
            },
            emphasis: {
            }
        }
        },{
            value: 610,
            name: '微博',
            itemStyle:{
                normal:{
                    shadowColor: 'rgba(63,200,227,0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {offset: 0, color: '#3fc8e3'},
                        {offset: 1, color: '#38a2f7'}
                    ],
                    globalCoord: true
                    }
                }
            }
        },{
            value: 34,
            name: '论坛',
            itemStyle:{
                normal:{
                    shadowColor: 'rgba(74,131,255,0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {offset: 0, color: '#4a83ff'},
                        {offset: 1, color: '#4a83ff'}
                    ],
                    globalCoord: true
                    }
                }
                
            }
        },{
            value: 35,
            name: '新闻',
            itemStyle:{
                normal:{
                    shadowColor: 'rgba(173,140,247,0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {offset: 0, color: '#ad8cf7'},
                        {offset: 1, color: '#ad8cf7'}
                    ],
                    globalCoord: true
                    }
                }
                
            }
        }
      ]
      this.pieChart1.setOption(this.pieOption1);
    },
    drawPie2() {
      this.pieOption2.series[0].data = [
        {
            value: 335,
            name: '正面',
            itemStyle:{
                normal:{
                    shadowColor: 'rgba(250,125,172,0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {offset: 0, color: '#fa7dac'},
                        {offset: 1, color: '#ffb561'}
                    ],
                    globalCoord: false
                    },
                },
                emphasis: {
                }
            }
        },{
            value: 61,
            name: '中立',
            itemStyle:{
                normal:{
                    shadowColor: 'rgba(63,200,227,0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {offset: 0, color: '#3fc8e3'},
                        {offset: 1, color: '#38a2f7'}
                    ],
                    globalCoord: true
                    }
                }
            }
        },{
            value: 34,
            name: '负面',
            itemStyle:{
                normal:{
                    shadowColor: 'rgba(74,131,255,0.5)',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 5,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                        {offset: 0, color: '#4a83ff'},
                        {offset: 1, color: '#4a83ff'}
                    ],
                    globalCoord: true
                    }
                }
                
            }
        }
      ]
      this.pieChart2.setOption(this.pieOption2);
    },
    drawBar() {
      var datas = [19, 23, 31, 121, 134, 400,213];
      var yMax = 0;
      for (let index = 0; index < datas.length; index++) {
          if(yMax < datas[index]){
              yMax = datas[index];
          } 
      }
      var dataShadow = [];
      for (var i = 0; i < datas.length; i++) {
            dataShadow.push(yMax);
      }
      this.barOption.series[0].data = dataShadow;
      this.barOption.series[1].data = datas;

      this.barChart.setOption(this.barOption);
    },
    drawMap() {
      this.province = '';
      var data = {
        areacode: "",
        name: "",
        value: 100,
        children: [
          {name: "北京",areacode: "110000",value: 45404,children: Array(0)},
          { name: "广东", areacode: "440000", value: 1729, children: Array(0) },
          // {name: "上海", areacode: "310200", value: 534, children: Array(0)},
          { name: "湖北", areacode: "420000", value: 268, children: [
              {name: '襄阳市', value: 100},{name: '武汉市', value: 200}
          ] },
          { name: "福建", areacode: "350000", value: 59, children: Array(0) },
          { name: "浙江", areacode: "330000", value: 37, children: Array(0) },
          { name: "山东", areacode: "370000", value: 28, children: Array(0) },
          { name: "安徽", areacode: "340000", value: 25, children: Array(0) },
          // {name: "贵州", areacode: "520000", value: 22, children: Array(0)},
          { name: "江西", areacode: "360000", value: 21, children: Array(0) },
          { name: "重庆", areacode: "500000", value: 20, children: Array(0) },
          // {name: "内蒙古", areacode: "150000", value: 19, children: Array(0)},
          { name: "江苏", areacode: "320000", value: 18, children: Array(0) },
          // {name: "吉林", areacode: "220000", value: 18, children: Array(0)},
          // {name: "新疆", areacode: "650000", value: 16, children: Array(0)},
          // {name: "湖南", areacode: "430000", value: 15, children: Array(0)},
          // {name: "天津", areacode: "120000", value: 14, children: Array(0)},
          // {name: "陕西", areacode: "610000", value: 13, children: Array(0)},
          // {name: "河南", areacode: "410000", value: 13, children: Array(0)},
          // {name: "山西", areacode: "140000", value: 10, children: Array(0)},
          // {name: "河北", areacode: "130000", value: 9, children: Array(0)},
          // {name: "辽宁", areacode: "210000", value: 8, children: Array(0)},
          { name: "广西", areacode: "450000", value: 8, children: Array(0) },
          // {name: "云南", areacode: "530000", value: 7, children: Array(0)},
          { name: "黑龙江", areacode: "230000", value: 7, children: Array(0) },
          // {name: "甘肃", areacode: "620000", value: 6, children: Array(0)},
          // {name: "四川", areacode: "510000", value: 5, children: Array(0)},
          // {name: "青海", areacode: "630000", value: 4, children: Array(0)},
          // {name: "海南", areacode: "460000", value: 1, children: Array(0)},
          // {name: "宁夏", areacode: "640000", value: 1, children: Array(0)},
          // {name: "澳门", areacode: "820000", value: 0, children: Array(0)},
          // {name: "香港", areacode: "810000", value: 0, children: Array(0)},
          // {name: "南海诸岛", areacode: "900000", value: 0, children: Array(0)},
          // {name: "台湾", areacode: "710000", value: 0, children: Array(0)},
          { name: "西藏", areacode: "540000", value: 0, children: Array(0) }
        ]
      };
      this.mapOption.series[0].data = data.children;
      this.mapChart.setOption(this.mapOption);
      
    },
    drawArea() {
      var total = 0;
      for (let index = 0; index < this.areaList.length; index++) {
        total += this.areaList[index].value;
      }
      for (let i = 0; i < this.areaList.length; i++) {
        this.areaList[i].rate = (this.areaList[i].value / total) * 100 + "%";
      }
      console.log(this.areaList);
    }
  },
  computed: {
    activeNames() {
      return this.activeName;
    }
  },
  watch: {
    activeNames(val) {
      if (val == "second") {
        this.lineChart = this.$echarts.init(document.getElementById("line-chart"));
        this.pieChart1 = this.$echarts.init(document.getElementById("pie-chart1"));
        this.pieChart2 = this.$echarts.init(document.getElementById("pie-chart2"));
        this.barChart = this.$echarts.init(document.getElementById("bar-chart"));
        this.riverChart = this.$echarts.init(document.getElementById("river-chart"));
        this.mapChart = this.$echarts.init(document.getElementById("map-chart"));
        this.drawLine();
        this.drawPie1();
        this.drawBar();
        this.drawPie2();
        this.drawRiver();
        this.drawMap();
        this.drawArea();
        this.dlClick();
      }
    }
  }
};
</script>
<style scoped>
</style>